<template>
  <div class="clearfix">
    <a-image-preview-group>
      <a-image :preview="false" :width="100" v-for="(item, index) in fileList" :key="index" :src="item" @dblclick="handleClick" />
    </a-image-preview-group>
      <img style="width: 100px; height: 100px; margin-left: 10px;" :src="item" @dblclick="handleClick(index)" v-for="(item, index) in fileList" />
    <button @dblclick="handleClick">双击我</button>
  </div>
</template>
<script setup>

import { ref, onMounted, inject } from 'vue';
const fileList = ref(["http://thinkphp6_all.local/storage/donation/20240927/6e30c2d5245f82ea675001d93e2665aa.png", "http://thinkphp6_all.local/storage/donation/20240927/a240adb9c18c90e3153f9931ebd0c425.png", "http://thinkphp6_all.local/storage/donation/20240927/b418a4f02abb74023765854cf4e8ff4f.png", "http://thinkphp6_all.local/storage/donation/20240927/c1e444ee1b28c77503c902a77fd17621.png", "http://thinkphp6_all.local/storage/donation/20240927/42457d79464284c2cd5dfbd6d4bbdc3a.png"]);
let a = '';
const handleClick = (idx) => {
  console.log('idx',idx);
  a = fileList.value[idx];
  fileList.value.splice(idx, 1);
  fileList.value.push(a);
  console.log(fileList.value);
}
</script>
<style scoped>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>